<template>
  <div id="home">
    <el-tabs type="border-card">
      <div class="gap-line"></div>
      <el-tab-pane label="首页">
        <Homepage></Homepage>
      </el-tab-pane>
      <el-tab-pane label="签约情况">配置管理</el-tab-pane>
      <el-tab-pane label="档案管理">配置管理</el-tab-pane>
      <el-tab-pane label="慢病管理">角色管理</el-tab-pane>
      <el-tab-pane label="老年人管理">角色管理</el-tab-pane>
      <el-tab-pane label="诊疗情况">角色管理</el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import Homepage from './Homepage.vue'
export default {
  name: 'Home',
  mounted() {
    console.log(111);
  },
  components: {
    Homepage
  }
}
</script>
<style lang="scss">
html,
body,
#home {
  height: 100%;
}
#home .el-tabs--border-card {
  height: 100%;
}
#home .el-tabs--border-card > .el-tabs__header {
  background-color: #fff;
  border: none;
}
#home .el-tabs--border-card > .el-tabs__content {
  padding: 0;
  height: 100%;
}
#home .el-tab-pane {
  height: 100%;
}
#home .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  width: 200px;
  height: 55px;
  line-height: 55px;
  margin-left: 8px;
  background-color: #fff;
  font-size: 20px;
  text-align: center;
  color: #000;
  border: 1px solid #eee;
  border-radius: 10px;
}
#home .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #eee;
  font-weight: bold;
}
#home .gap-line {
  width: 100%;
  background: #eee;
  height: 15px;
}
</style>
